import React, { memo, useEffect } from 'react';
//antd相关
import { Form, Input, Button, Checkbox} from 'antd';
//redux相关
import { useSelector, shallowEqual,useDispatch } from 'react-redux';
import {login} from "../../store/loginStore/actionCreators";
//引入路由相关
import {Redirect} from 'react-router-dom';
//引入外联样式
import './style.css';

export default memo(function Login() {
    //获取状态
    const user = useSelector(state => state.getIn(['user']), shallowEqual);
    
    const { isLogin, isLoading } = user;
    
    //dispatch
    const dispatch = useDispatch();

    //组件相关
    const layout = {
        labelCol: {
          span: 6,
        },
        wrapperCol: {
          span: 16,
        },
      };
    const tailLayout = {
    wrapperCol: {
        offset: 4,
        span: 10,
    },
    };
      
    const onFinish = (values) => {
        // console.log(values);
        // console.log("四号点");
        dispatch(login(values));
        // console.log(isLogin);
      };

    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    useEffect(() => {
        // console.log(user);
        // console.log("一号点,此页面刷新");  
        // console.log(user);
    }, [user, dispatch,isLogin]);

    return (
        // 在这里判断是否登录，如果处于登录状态，则跳转到管理页面
        isLogin ?
        <Redirect to='/admin' />
        :
        <div className='Loginbox'>
            <Form
            {...layout}
            name="basic"
            initialValues={{
                remember: true,
            }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            className='FrameStyle'
        >
            <Form.Item
                label="管理员名称"
                name="admin_name"
                rules={[
                {
                    required: true,
                    message: '管理员名称必须填写！',
                },
                ]}
            >
                <Input disabled={isLoading}   placeholder='Please input your admin name!'/>
            </Form.Item>

            <Form.Item
                label="密码"
                name="admin_password"
                rules={[
                {
                    required: true,
                    message: '密码必须填写！',
                },
                ]}
            >
                <Input.Password disabled={isLoading}  placeholder='Please input your password!'/>
            </Form.Item>

            <Form.Item {...tailLayout} name="remember" valuePropName="checked">
                <Checkbox disabled={isLoading} >Remember me</Checkbox>
            </Form.Item>

            <Form.Item wrapperCol={{offset: 16,span: 10,}}>
                <Button type="primary" htmlType="submit" loading={isLoading}>
                    登录
                </Button>
            </Form.Item>
            <Form.Item wrapperCol={{offset:4,span: 16,}} className='bottomStyle'>
                Welcome to WangYuYun Admin！
            </Form.Item>
        </Form>
        </div>
        
    )
})
